<template>
    <div class="box">
        <div v-show="state">登陆了</div>
        <div v-show="!state">没登陆</div>
        <!-- 头部导航 -->
        <div class="top">
            <div class="top_content">
                <div class="top_content_logo"><img src="../../assets/images/logo.png" alt=""></div>
                <!-- 导航 -->
                <div class="top_nevigation">
                    <div class="nav-container">
                    <ul class="top_nevigation_content">
                        <li class="top_nevigation_content_1"><a href="/index">首页</a></li>
                        <li class="top_nevigation_content_2">
                        <span>
                            <a-dropdown>
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                    课程分类 <a-icon type="down"/>
                                </a>
                                <a-menu slot="overlay">
                                    <a-menu-item v-for="(item,index) in title" :key="index">
                                        <a href="javascript:;">{{item.title}}</a>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>
                        </span>
                        </li>
                        <li class="top_nevigation_content_3"><a href="">专属课程</a></li>
                    </ul>
                    </div>
                </div>
                <!--                搜索框-->
                <span class="top_content_input">
                    <input type="text" placeholder="搜索课程">
                    <span class="top_content_input_content">
                        <span><img src="../../assets/images/sousuo.png" alt=""></span>
                        <span>搜索</span>
                    </span>
                </span>
                <span class="top_content_sigoin">
                    <router-link tag="span" to="/BuyCar" class="top_content_sigoin_1">
                        <!--购物车-->
                        <a-badge :count="Number(carNum)">
<!--                            <a href="#" class="head-example" />-->
                                <img src="../../assets/images/gouwuchezhengpin.png" alt="">
                        </a-badge>
                    </router-link>
                    <span>
                        <span v-show="state">
                            <a-dropdown>
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                    <span class="top_content_sigoin_2">{{name.nickname}}</span>
                                    <span class="top_content_sigoin_3">
                                        <img src="../../assets/images/yonghu.png" alt="">
                                    </span>
                                </a>
                                <a-menu slot="overlay">
                                    <a-menu-item>
                                        <a href="javascript:;">个人中心</a>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <a href="javascript:;">我的课程</a>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <a href="javascript:;">我的订单</a>
                                    </a-menu-item>
                                    <a-menu-item>
                                        <a href="javascript:;" @click="LogOut">退出登录</a>
                                    </a-menu-item>
                                </a-menu>
                            </a-dropdown>

                                                </span>
                        <span v-show="!state" @click="alertLogin">
                            <span class="top_content_sigoin_2">注册/登录</span>
                            <span class="top_content_sigoin_3"><img src="../../assets/images/yonghu.png" alt=""></span>
                        </span>

                    </span>
                </span>
            </div>
            <div style="clear: both;"></div>
        </div>
        <Login v-show="flags"></Login>
        </div>
</template>

<script>
    import {getList,userLogOut} from '../../api/Tlmusic'
    import Login from './Login'
    import {mapState} from 'vuex'
    export default {
        name: "Title",
        data(){
            return{
                enable: 1,
                title: [{}],
                flag:false
            }
        },
        components:{
            getList,
            Login

        },
        created() {
            getList(this.enable).then(res => {
                this.title = res.rows
            })
            // userInfo().then(res=>{
            //     this.userInfo = res.userInfo
            // } )

            this.$store.dispatch("getUserInfo")
            this.$store.dispatch("getBuyCarInfo")
        },
        methods:{
            alertLogin(){
                this.flag = !this.flag
                   this.$store.commit("alertBuyCar", {flag:this.flag})
            },
            LogOut(){

                userLogOut().then(res=>{

                    this.$store.commit("changelogin", {userInfo:{},isLogin: false})
                    console.log(this.$store.state.isLogin)
                } )
            }
        },
        computed:{
            ...mapState({
                name:"userInfo",
                state:'isLogin',
                carNum:'carNum',
                flags:'flag'
            })
        }

    }
</script>

<style scoped lang="less">
    * {
        margin: 0;
        padding: 0;
    }

    ul>li {
        list-style: none;
    }

    /* 设置头部 */
    /* logo */
    .top {
        overflow: hidden;
    }

    .top_content {
        height: 80px;
    }

    .top_content_logo {
        width: 13.7%;
        float: left;
        margin-left: 3.4%;
    }

    .top_content_logo>img {
        width: 100%;
        float: left;
        height: 55px;
        margin-top: 16px;
    }
    /*导航*/
    .top_nevigation{
        margin-top: 30px;
        margin-right: 30px;
        float: left;
        margin-left: 40px;
    }
    .nav-container{height: 30px;
        float: left;
        ul li{
            float: left;
            margin: 0 30px 0 0;
            font-size: 16px;
            a{text-decoration: none;
            color: black;
            }
        }
    }

    /* input输入框 */
    .top_content_input {
        margin-top: 24px;
        width: 30.5%;
        display: inline-block;
        /*margin-left: 15%;*/
        position: relative;
    }

    .top_content_input>input {
        width: 79.5%;
        height: 35px;
        line-height: 35px;
        border-radius: 15px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        /* text-decoration: none; */
        text-indent: 1em;
    }

    .top_content_input>input:hover {
        border-color: #00cf8c;
    }

    .top_content_input_content {
        display: inline-block;
        height: 36px;
        line-height: 35px;
        width: 17.5%;
        background-color: #00cf8c;
        vertical-align: middle;
        margin-left: -5px;
        border: 1px solid #cccccc;
        border-radius: 15px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        color: white;
        cursor: pointer;
    }

    .top_content_input_content>span>img {
        position: absolute;
        width: 5%;
        top: 10px;
        right: 13%;
    }

    .top_content_input_content>span:nth-of-type(2) {
        margin-left: 43%;
    }

    /* 登录注册 */
    .top_content_sigoin {
        /*margin-left: 13.7%;*/
        cursor: pointer;
        height: 100%;
        float: right;
        margin-right: 100px;
        font-size: 14px;
        padding: 26px 0 0;
    }

    .top_content_sigoin_1 {
        border-right: 1px solid #cccccc;
        padding-right: 10px;
img{        width: 20px;
    height: 20px;}
    }

    .top_content_sigoin_2 {
        margin-left: 10px;
    }

    .top_content_sigoin_3 {
        margin-left: 5px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        background-color: #cccccc;
        border-radius: 20px;
        text-align: center;
        display: inline-block;
    }

</style>